<template>
  <div class="header">
    <div class="header-content">
      <div class="header-left">
        <img class="header-left-img" src="@/assets/images/home/logo.png" alt="LOGO" />
        <i class="header-left-line"></i>
        <p class="header-left-label">开放平台</p>
      </div>
      <div class="header-center">
        <p v-for="item of list" :class="{ active: item.path === $route.path }" :key="item.id" @click="menuClick(item.path)">{{ item.name }}</p>
      </div>
      <div class="header-right">
        <div class="header-right-console">
          <img class="header-right-img" src="@/assets/images/home/console.png" alt="控制台" />
          <p @click="consoleClick">控制台</p>
        </div>
        <i class="header-right-line"></i>
        <div class="header-right-status">
          {{ loginList.length }}
          <div class="name" v-if="loginShow">
            <el-dropdown>
              <span class="el-dropdown-link"> {{ loginList.name }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="back">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="no-people" v-else>
            <p class="header-right-login" :class="{ active: loginActive }" @click="loginClick">登录</p>
            <p class="header-right-registr" @click="regsiterClick">注册</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'commonHeader',
  data() {
    return {
      LoginStatus: true,
      loginActive: false,
      list: [
        {
          id: 0,
          name: '首页',
          path: '/home'
        },
        {
          id: 1,
          name: '集成方案',
          path: '/programme'
        },
        {
          id: 2,
          name: '文档中心',
          path: '/file'
        },
        {
          id: 3,
          name: '下载中心',
          path: '/download'
        }
      ],
      nameShow: true
    }
  },
  methods: {
    menuClick(path) {
      this.$router.push(path)
    },
    regsiterClick() {
      // 跳转注册页面
      this.$router.push('/regsiter')
    },
    loginClick() {
      // 跳转登录册页面
      this.$router.push('/login')
    },
    consoleClick() {
      // 跳转控制台
      this.$router.push('/console')
    },
    routerLogin(to) {
      if (to.path == '/login') {
        this.loginActive = true
      } else {
        this.loginActive = false
      }
    },
    async back() {
      // 退出登录
      //console.log('退出登录')
      const data = await this.http.get(`/web/login/sign-out?access_token=${this.loginList.token}`)
      console.log(data)
      this.$store.commit('removeCompanyList')
      this.$store.commit('removeloginList')
      this.$store.commit('loginShowNo')
    }
  },
  computed: {
    ...mapState({
      loginList: modules => modules.login.loginList,
      loginShow: modules => modules.login.loginShow
    })
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/common.scss';
.active {
  color: #ffffff !important;
}
/deep/.el-dropdown-menu {
  padding: 0 !important;
}
/deep/.el-dropdown-menu__item:hover {
  background: $background;
  color: #ffffff;
}
/deep/.el-dropdown-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #818591 !important;
  cursor: pointer;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 91px;
  color: #ffffff;
  background: rgba(30, 30, 30, 0.7);
  .header-content {
    width: $homeWidth;
    height: 100%;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    justify-content: space-between;
    .header-left {
      display: -webkit-flex;
      align-items: center;
      .header-left-img {
        width: 134px;
        height: 41px;
      }
      .header-left-line {
        width: 2px;
        background: #a3a3a3;
        height: 26px;
        margin: 0 17px;
      }
      .header-left-label {
        font-size: 26px;
        letter-spacing: 1px;
      }
    }
    .header-center {
      display: flex;
      justify-content: space-between;
      p {
        // margin: 0 35px;
        width: 110px;
        text-align: center;
        font-size: 16px;
        color: $fontColor;
        cursor: pointer;
      }
      p:hover {
        color: #ffffff;
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      font-size: 16px;
      .header-right-console {
        display: flex;
        align-items: center;
        color: $fontColor;
        cursor: pointer;
        .header-right-img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        p:hover {
          color: #ffffff;
        }
      }
      .header-right-line {
        width: 1px;
        background: #a3a3a3;
        height: 20px;
        margin: 0 20px;
      }
      .header-right-status {
        .no-people {
          display: flex;
          align-items: center;

          .header-right-login {
            cursor: pointer;
            color: $fontColor;
          }
          .header-right-registr {
            cursor: pointer;
            margin-left: 20px;
            width: 71px;
            padding: 6px 0;
            text-align: center;
            border-radius: 6px;
            background: $background;
          }
          p:hover {
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
